<template>
  <div class="all">
    <ul class="timeline-wrapper">
      <li class="timeline-item" v-for="t in timelineList" :key="t.id">
        <div class="timeline-box">
          <div class="out-circle">
            <div class="in-circle"></div>
          </div>
          <div class="long-line"></div>
        </div>
        <div class="timeline-content">
          <div class="timeline-date">{{t.time}}</div>
          <div class="timeline-title">{{ t.title}}<span :class="{'red':t.status==-1,'green':t.status==1,'yellow':t.status==0}">{{ t.status|getStr}}</span></div>
          <div class="timeline-desc">{{ t.desc}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》'

export default {
  name: "",
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      timelineList: [
        {
          time: "2022-04-23 10:00:01.300 ~ 2022-04-23 10:00:11.000",
          title: "实例状态：",
          status: 1,
          desc: "是否结束:结束",
        },
        {
          time: "2022-04-23 10:00:01.300 ~ 2022-04-23 10:00:11.000",
          title: "实例状态：",
          status: 1,
          desc: "是否结束:结束",
        },
        {
          time: "2022-04-23 10:00:01.300 ~ 2022-04-23 10:00:11.000",
          title: "实例状态：",
          status: 0,
          desc: "是否结束:未结束",
        },
        {
          time: "2022-04-23 10:00:01.300 ~ 2022-04-23 10:00:11.000",
          title: "实例状态：",
          status: 0,
          desc: "是否结束:未结束",
        },
        {
          time: "2022-04-23 10:00:01.300 ~ 2022-04-23 10:00:11.000",
          title: "实例状态：",
          status: -1,
          desc: "是否结束:未结束",
        },
        {
          time: "2022-04-23 10:00:01.300 ~ 2022-04-23 10:00:11.000",
          title: "实例状态：",
          status: -1,
          desc: "是否结束:未结束",
        },
      ], //页面展示数据
    };
  },
  filters: {
    getStr(value) {
      let str = "";
      switch (value) {
        case 0:
          str = "进行中";
          break;
        case 1:
          str = "成功";
          break;
        case -1:
          str = "失败";
          break;
      }
      return str;
    },
  },

  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
  // 方法集合
  methods: {
    show() {
      this.dialogTableVisible = true;
    },
  },
};
</script>

<style scoped >
.all {
  width: 440px;
}
.red {
  color: red;
}
.green {
  color: #31be66;
}
.yellow {
  color: #e6db74;
}
ul.timeline-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 时间线 */
.timeline-item {
  position: relative;
}
.timeline-box {
  text-align: center;
  position: absolute;
}
.out-circle {
  width: 16px;
  height: 16px;
  background: rgba(14, 116, 218, 0.1);
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  /*opacity: 0.1;*/
  border-radius: 50%;
  display: flex;
  align-items: center;
}
.in-circle {
  width: 8px;
  height: 8px;
  margin: 0 auto;
  background: rgba(14, 116, 218, 1);
  border-radius: 50%;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
}
.long-line {
  width: 2px;
  height: 98px;
  background: rgba(14, 116, 218, 1);
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  opacity: 0.1;
  margin-left: 8px;
}

.timeline-content {
  box-sizing: border-box;
  margin-left: 20px;
  height: 106px;
  padding: 10px 20px;
  text-align: left;
  margin-bottom: 30px;
}

.timeline-content:hover {
  cursor: pointer;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.timeline-title {
  font-size: 14px;
  word-break: break-all;
  padding-bottom: 16px;
  color: #333;
  font-weight: 500;
  /*display: inline;*/
}

.timeline-date {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  padding-bottom: 16px;
}
.timeline-desc {
  font-size: 14px;
  color: #999999;
}
.timeline-item:last-of-type .timeline-content {
  margin-bottom: 0;
}
</style>
